<style lang='less'>
.app-home-vue {
  .top-part {
    display: inline-block;
    padding-left: 30px;
    width: 15%;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }

  .home-part-body {
    height: 350px;

    .echarts-vue {
      height: 350px;
    }
  }

  .home-part-body2 {
    height: 420px;

    .echarts-vue {
      height: 420px;
    }
  }

  .progress-div {
    >p {
      padding: 8px 0;
    }

    .h-progress {
      &-title {
        color: @dark2-color;
        font-size: 15px;
      }

      &-text {
        width: 40px;
      }
    }
  }
}

</style>
<template>
  <div class="app-home-vue frame-page">
    <Row :space="30">
      <Cell width="24">
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">基本信息</div>
          </div>
          <div class="h-panel-body">
            <div class="top-part">商户总数 : {{shop_count}}</div>
            <div class="top-part">用户总数 : {{user_count}}</div>
            <div class="top-part">今日新增用户数 : {{today_user}}</div>
          </div>
        </div>
      </Cell>
      <Cell :xs='24' :sm='24' :md='24' :lg='16' :xl='16'>
        <div class="h-panel">
          <div class="relative">
            <Tabs class="common-panel-tabs" v-model="type" :datas="{type1: '近7天新增用户'}"></Tabs>
            <!-- <div class="middle-right" style="right: 25px;"><span class="text-hover" @click="openMore">查看更多</span></div> -->
          </div>
          <div class="home-part-body">
            <Chart :options="data1" v-if="type=='type1' && data1.series[0].data.length>0" key="type1"></Chart>
            <!-- <Chart :options="data3" v-if="type=='type2'" key="type2"></Chart> -->
          </div>
        </div>
      </Cell>
      <Cell :xs='24' :sm='24' :md='24' :lg='8' :xl='8'>
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">本月目标</div>
          </div>
          <div class="h-panel-body home-part-body">
            <Row :space="20">
              <Cell :width="10" class="text-right">
                <h-circle :percent="month_user/100*100" :stroke-width="10" :size="90">
                  <p><span class="font28">{{month_user}}</span><span class="gray-color"> / 100</span></p>
                </h-circle>
              </Cell>
              <Cell :width="14">
                <p class="gray-color">用户数</p>
                <p class="dark-color font22">100</p>
              </Cell>
              <!-- <p class="clearfix"></p>
              <Cell :width="10" class="text-right">
                <h-circle :percent="99" :stroke-width="10" :size="90" color="green">
                  <p><span class="font28">{{parseInt(123*76/100)}}</span><span class="gray-color"> / 123</span></p>
                </h-circle>
              </Cell>
              <Cell :width="14">
                <p class="gray-color">目前达成比例</p>
                <p class="dark-color font22">122,332,98</p>
              </Cell> -->
            </Row>
          </div>
        </div>
      </Cell>
      <!-- <Cell :xs='24' :sm='24' :md='24' :lg='16' :xl='16'>
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">数据比例</div>
          </div>
          <div class="home-part-body2">
            <Chart :options="data2"></Chart>
          </div>
        </div>
      </Cell> -->
      <!-- <Cell :xs='24' :sm='24' :md='24' :lg='8' :xl='8'>
        <div class="h-panel">
          <div class="h-panel-bar">
            <div class="h-panel-title">订单统计</div>
            <input type="file" @change="upload($event)">
            <div class="h-panel-right"><span class="gray-color">总共达成</span><i class="h-split"></i><span class="font20 primary-color">200</span><i class="h-split"></i><span class="gray-color">W</span></div>
          </div>
          <div class="h-panel-body progress-div home-part-body2">
            <p><Progress :percent="99" color="green"><span slot="title">订单状态</span><span slot="text">4个</span></Progress></p>
            <p><Progress :percent="88" color="blue"><span slot="title">订单状态</span><span slot="text">0个</span></Progress></p>
            <p><Progress :percent="55" color="red"><span slot="title">订单状态</span><span slot="text">0个</span></Progress></p>
            <p><Progress :percent="77" color="blue"><span slot="title">订单状态</span><span slot="text">0个</span></Progress></p>
            <p><Progress :percent="66" color="yellow"><span slot="title">订单状态</span><span slot="text">0个</span></Progress></p>
          </div>
        </div>
      </Cell> -->
    </Row>
  </div>
</template>
<script>
import data1 from './data1';
import data2 from './data2';
import data3 from './data4';

export default {
  data() {
    return {
      data1,
      data2,
      data3,
      type: 'type1',
      shop_count:0,
      user_count:0,
      today_user:0,
      month_user:0
    };
  },
  /**
   * 页面加载执行
   * @return {[type]} [description]
   */
  async mounted() {
    this.data1.xAxis[0].data = [this.getDay(-6), this.getDay(-5), this.getDay(-4), this.getDay(-3), this.getDay(-2), this.getDay(-1), this.getDay()]
    this.getAllData()
  },
  methods: {
    async getAllData() {
      let day7_user = await this.$cloud.index().getUserList({addtime:['>',this.getDay(-6,'ymd')]})
      let day7_arr = [0,0,0,0,0,0,0]
      for (var i = 0; i < day7_arr.length; i++) {
        let time1 = this.getDay(i+1-day7_arr.length,'ymd')
        let time2 = this.getDay(i+2-day7_arr.length,'ymd')
        for (var k in day7_user) {
          if (day7_user[k].addtime >= time1 && day7_user[k].addtime < time2) {
            day7_arr[i]++
          }
        }
      }
      this.data1.series[0].data = day7_arr
      this.today_user = day7_arr[day7_arr.length-1]
      this.shop_count = await this.$cloud.name('shop').where({putaway:'1'}).limit(-1).count()
      this.user_count = await this.$cloud.index().getUserList(null,2)
      this.month_user = await this.$cloud.index().getUserList({addtime:['>',this.getDay(0,'ym')]},2)
    },
    getDay(day = 0, type = 'md') {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      if (type === 'y') {
        return tYear + "-01-01 00:00:00";
      }
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      if (type === 'ym') {
        return tYear + "-" + tMonth + "-01 00:00:00";
      }
      tDate = this.doHandleMonth(tDate);
      if (type === 'md') {
        return tMonth + "/" + tDate;
      } else {
        return tYear + "-" + tMonth + "-" + tDate + " 00:00:00";
      }
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    }
  }
};

</script>
